<template>
  <div class="work-shop">
    <!--  头部区域  -->
    <WorkHeader />
    <!--  内容区域  -->
    <div class="content" :style="{ height: contentHeight }">
      <a-row :gutter="24">
        <a-col :xl="8">
          <!--     设备数量     -->
          <BorderComponent>
            <EquipmentNumber />
          </BorderComponent>
          <!--     设备稼动率     -->
          <BorderComponent>
            <EquipmentCropPower />
          </BorderComponent>

          <!--     设备运行率     -->
          <BorderComponent>
            <EquipmentRunningRate />
          </BorderComponent>
        </a-col>
        <a-col :xl="9">
          <BorderComponent>
            <EquipmentInfo />
          </BorderComponent>
        </a-col>
        <a-col :xl="7">
          <!--    车间动态      -->
          <BorderComponent>
            <WorkshopDynamics />
          </BorderComponent>

          <!--    产量统计      -->
          <BorderComponent>
            <OutputStatistics />
          </BorderComponent>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import WorkHeader from "./components/WorkHeader";
import EquipmentNumber from "./components/EquipmentNumber";
import EquipmentCropPower from "./components/EquipmentCropPower";
import EquipmentRunningRate from "./components/EquipmentRunningRate";
import EquipmentInfo from "./components/EquipmentInfo";
import WorkshopDynamics from "./components/WorkshopDynamics";
import OutputStatistics from "./components/OutputStatistics";
import BorderComponent from "./components/BorderComponent";

export default {
  name: "index",
  components: {
    WorkHeader,
    EquipmentNumber,
    EquipmentCropPower,
    EquipmentRunningRate,
    EquipmentInfo,
    WorkshopDynamics,
    OutputStatistics,
    BorderComponent,
  },
  data() {
    return { contentHeight: "" };
  },
  created() {
    // 监听事件
    window.addEventListener("resize", this.onresize);
  },
  beforeDestroy() {
    // 取消监听事件
    window.removeEventListener("resize", this.onresize);
  },
  methods: {
    // 监听是否全屏状态
    onresize() {
      // 利用屏幕分辨率和window对象的内高度来判断兼容IE
      let winFlag = window.innerHeight === window.screen.height;
      // 利用window全屏标识来判断 -- IE无效
      let isFull = window.fullScreen || document.webkitIsFullScreen;

      if (isFull === undefined) {
        this.isFullscreen = winFlag;
      } else {
        this.isFullscreen = winFlag || isFull;
      }
      if (winFlag) {
        this.contentHeight = "100%";
      } else {
        this.contentHeight = "100%";
      }
      console.log(winFlag); // true全屏   false不是全屏
    },
  },
};
</script>

<style scoped lang="less">
@import "index";
</style>
